<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Master Minds</title>
<style type=text/css>
body {
	font-family:Verdana,Arial,Helvetica,sans-serif;
}

.hide {
	display:none;
}
</style>
<script type="text/javascript">

/* ---- [START] Global variables ----- */

// Message with dynamic parametes will be shown for each player before entering his private set
var selectInformText = '{p1} is about to select his/her private set, <br/><font color="red">{p2}</font> please step away from the screen <br/> and give {p1} some privacy to select his/her set alone.';
var selectFinishText = 'Now both {p1} and {p2} have selected your private sets, <br/> start your game by pressing "Start" button';

// Player names
var p1Name = 'anonymous';
var p2Name = 'anonymous';

// Player sets
var p1Set = '';
var p2Set = '';

// Set choices
var choicesSet = 'abcd';

/* ---- [END] Global variables ----- */

/*
 * First executed method, for registering events and initializing variables
 */
function load() {
	document.getElementById('checkBtn').onclick = registerPlayers;
}

/* ---- [START] Phase [1] ---- */

function registerPlayers(e) {

	// register players
	p1Name = document.getElementById('p1NameText').value;
	p2Name = document.getElementById('p2NameText').value;
	
	// replace player name tokens
	var informMsg = selectInformText.replace(/{p1}/g, p1Name);
	informMsg = informMsg.replace(/{p2}/g, p2Name.toUpperCase());
	
	// hide register-frame and show select-frame
	document.getElementById('register-frame').className = 'hide';
	document.getElementById('select-frame').className = '';
	document.getElementById('p1-inform').className = '';
	document.getElementById('p1-inform-msg').innerHTML = informMsg;
	
	// register shown frame events
	document.getElementById('selectP1InformBtn').onclick = selectPlayer1Set;
	
}

/* ---- END [1] ---- */


/* ---- [START] Phase [2] ---- */

function selectPlayer1Set(e) {
	
	// hide p1-inform and show p1-select
	document.getElementById('p1-inform').className = 'hide';
	document.getElementById('p1-select').className = '';
	
	// register shown frame events
	document.getElementById('selectP1SetBtn').onclick = infromPlayer2;
	
}

function infromPlayer2(e) {
	
	// replace player name tokens
	var informMsg = 'now ' + selectInformText.replace(/{p1}/g, p2Name);
	informMsg = informMsg.replace(/{p2}/g, p1Name.toUpperCase());
	
	// save p1 set
	p1Set = document.getElementById('selectP1SetText').value;
	
	// hide p1-select and show p2-inform
	document.getElementById('p1-select').className = 'hide';
	document.getElementById('p2-inform').className = '';
	document.getElementById('p2-inform-msg').innerHTML = informMsg;
	
	// register shown frame events
	document.getElementById('selectP2InformBtn').onclick = selectPlayer2Set;
}

function selectPlayer2Set(e) {
	
	// hide p2-inform and show p2-select
	document.getElementById('p2-inform').className = 'hide';
	document.getElementById('p2-select').className = '';
	
	// register shown frame events
	document.getElementById('selectP2SetBtn').onclick = finishSelect;
	
}

function finishSelect(e) {

	// save p2 set
	p2Set = document.getElementById('selectP2SetText').value;
	
	// hide p2-select and show select-end
	document.getElementById('p2-select').className = 'hide';
	document.getElementById('select-end').className = '';
	
	// replace player name tokens
	var finishMsg = selectFinishText.replace(/{p1}/g, p1Name);
	finishMsg = finishMsg.replace(/{p2}/g, p2Name);
	document.getElementById('select-end-text').innerHTML = finishMsg;
	
	// register shown frame events
	document.getElementById('selectEndBtn').onclick = startGame;
}

/* ---- END [2] ---- */


/* ---- [START] Phase [3] ---- */

function startGame(e) {
	
	// hide select-frame and show start-frame
	document.getElementById('select-end').className = 'hide';
	document.getElementById('select-frame').className = 'hide';
	document.getElementById('start-frame').className = '';
	
}

/* ---- END [3] ---- */


/* ---- [START] Phase [4] ---- */

/* ---- END [4] ---- */

</script>
<script type="text/javascript" src="script/CompareEngine.js">
</script>
</head>
<body onload="load()">
<center>

<!-- [1] Register players frame -->
<table id="register-frame">
	<tr>
		<td colspan=2>Please enter player names:</td>
	</tr>
	<tr>
		<td>Player 1</td>
		<td>:<input id="p1NameText" type=text /></td>
	</tr>
	<tr>
		<td>Player 2</td>
		<td>:<input id="p2NameText" type=text /></td>
	</tr>
	<tr>
		<td><input id="checkBtn" type=button  value="Proceed"></td>
		<td></td>
	</tr>
</table>
<!-- END [1] -->

<!-- [2] Selecting private sets -->
<table id="select-frame" class="hide">
	<tr>
		<td>
			<div id="p1-inform" class="hide">
				<p id="p1-inform-msg">[p1-name] is about to enter his private set, [p2-name] please step away from the screen and
					give [p1-name] some privacy</p>
				<input type=button id="selectP1InformBtn" value="Proceed"/>
			</div>
			<div id="p1-select" class="hide">
				<p id="p1-select-msg"></p>
				<label id="p1-available-sets">a, b, c, d</label><br/>
				<input id="selectP1SetText" type=text />
				<input type=button id="selectP1SetBtn" value="Proceed" maxlength=4/>
			</div>
			<div id="p2-inform" class="hide">
				<p id="p2-inform-msg">[p1-name] is about to enter his private set, [p2-name] please step away from the screen and
					give [p1-name] some privacy</p>
				<input type=button id="selectP2InformBtn" value="Proceed"/>
			</div>
			<div id="p2-select" class="hide">
				<p id="p2-select-msg"></p>
				<label id="p2-available-sets">a, b, c, d</label><br/>
				<input id="selectP2SetText" type=text />
				<input type=button id="selectP2SetBtn" value="Proceed" maxlength=4/>
			</div>
			<div id="select-end" class="hide">
				<p id="select-end-text"></p>
				<input type=button id="selectEndBtn" value="Start"/>
			</div>
		</td>
	</tr>
</table>
<!-- END [2] -->

<!-- [3] Start the game -->
<table id="start-frame" class="hide">
	
</table>
<!-- END [3] -->

<!-- [4] End of game and scores -->
<table id="end-frame" class="hide">
	<tr>
		<td></td>
	</tr>
</table>
<!-- END [4] -->

</center>
</body>
</html>